<template>
	<div class="clipboard">
		<h2>复制</h2>
		<input type="text" id="input-text" value="这是一段文本1" />
		<el-button
			type="primary"
			round
			@click="copy"
			id="copy-text"
			data-clipboard-target="#input-text"
			>复制</el-button
		>
		<h2>剪切</h2>
		<input type="text" id="input-text2" value="这是一段文本2" />
		<el-button
			type="primary"
			round
			@click="cut"
			id="copy-text2"
			data-clipboard-target="#input-text2"
			data-clipboard-action="cut"
			>剪切</el-button
		>
		<h2>复制当前元素</h2>
		<el-button
			type="primary"
			round
			@click="copyCurrent"
			id="copy-text3"
			data-clipboard-text="这是一段文本3"
			>复制当前</el-button
		>
	</div>
</template>

<script>
import Clipboard from 'clipboard';

export default {
	name: 'clipboard',
	components: {},
	data() {
		return {};
	},
	computed: {},
	mounted() {},
	methods: {
		copy() {
			var clipboard = new Clipboard('#copy-text');
			clipboard.on('success', function (e) {
				console.info('Action:', e.action);
				console.info('Text:', e.text);
				console.info('Trigger:', e.trigger);
				// 释放内存
				clipboard.destroy();
			});

			clipboard.on('error', function (e) {
				console.error('Action:', e.action);
				console.error('Trigger:', e.trigger);
				// 释放内存
				clipboard.destroy();
			});
		},
		cut() {
			var clipboard = new Clipboard('#copy-text2');
			clipboard.on('success', function (e) {
				console.log(e.text);
				clipboard.destroy();
			});

			clipboard.on('error', function () {
				clipboard.destroy();
			});
		},
		copyCurrent() {
			var clipboard = new Clipboard('#copy-text3');
			clipboard.on('success', function (e) {
				console.log(e.text);
				clipboard.destroy();
			});

			clipboard.on('error', function () {
				clipboard.destroy();
			});
		},
	},
};
</script>
